import React, { useEffect,useState } from 'react';
import Tables from '../../../component/Tables';
import '../../../style/vipsearch.scss'
import { useNavigate } from 'react-router-dom'
import { vipsearch, vipsearch_add, vipsearch_del, vipsearch_manydel } from '../../../utils/Vipmanagr'
import { Button, Form, Input, DatePicker, ConfigProvider, Space, Tag, notification, Modal ,Radio} from 'antd';
const { RangePicker } = DatePicker;


function Vipsearch(props) {
    //表头
    const columns = [
        {
            title: '会员信息',
            dataIndex: 'vipname',
            align: "center",
        },
        {
            title: '会员等级',
            dataIndex: 'grade',
            align: "center"
        },
        {
            title: '会员标签',
            key: 'tags',
            dataIndex: 'tags',
            align: "center",
            render: (_, { tags }) => (
                <>
                    {tags.map((tag) => {
                        let color = tag.length > 5 ? 'geekblue' : 'green';
                        return (
                            <Tag color={color} key={tag}>
                                {tag.toUpperCase()}
                            </Tag>
                        );
                    })}
                </>
            ),
        },
        {
            title: '积分',
            dataIndex: 'integral',
            align: "center"
        },
        {
            title: '下单次数',
            dataIndex: 'frequency',
            align: "center"
        },
        {
            title: '下单金额',
            dataIndex: 'amount',
            align: "center"
        },
        {
            title: '付费会员',
            dataIndex: 'pay',
            align: "center"
        },
        {
            title: '卡内余额',
            dataIndex: 'balance',
            align: "center"
        },
        {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => { todetails(record.key) }}>会员详情</a>
                    <a onClick={() => { Del(record.id) }}>删除</a>
                </Space>
            ),
        },
    ];
    var [data, setData] = useState([]);
    useEffect(() => {
        vipsearch().then((res) => {
            setData(res.data)
        })
    }, [])
    var navigate = useNavigate();
    //查询会员信息
    const onFinish = (values) => {
        if(values.vipname!=undefined){
            vipsearch({ vipname_like: values.vipname }).then((res) => {
                setData(res.data)
            })
        }
        else if (values.grade != undefined){
            vipsearch({ grade_like: values.grade }).then((res) => {
                setData(res.data)
            })
        }else{
            vipsearch({ key_like:'' }).then((res) => {
                setData(res.data)
            })
        }
    };
    //对话框控制
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };

    //点击编辑按钮触发的回调
    var todetails = (record)=>{
        console.log(record)
        navigate('/index/vipmanage/vipdetails', { state: record } )
    }
    // 删除数据
    var Del = (id)=>{
        console.log(id)
        vipsearch_del(id).then((res)=>{
            notification.success({
                placement: "top",
                message: '删除成功'
            })
            vipsearch().then((res) => {
                setData(res.data)
            })
        })
    }
    //新增数据
    const onFinish1 = (values) => {
        vipsearch_add({integral:0,frequency:0,amount:0,balance:0,wechat: values.wechat, pay: values.pay, grade: values.grade, vipname: values.vipname, phone: values.phone, sex: values.sex, consignee: values.consignee,age:values.age, address: values.address, remarks: values.remarks, key: (data.length + 1), id: (data.length + 1), tags: ['标签一', '标签二'], pic:"https://img0.baidu.com/it/u=3750280318,2497096330&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",origin:'微信商城' }).then((res)=>{
            vipsearch().then((res) => {
                setData(res.data)
            })
            notification.success({
                placement: "top",
                message: '添加成功'
            })
        })
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    //接收子组件传过来的数据
    var [keys,setKeys] = useState([])

    //子向父传值
    var manyDel = (keys)=>{
        setKeys(keys)
        console.log(keys)
    }

    // 批量删除
    var manyDell = ()=>{
        keys.map((item) => {
            vipsearch_manydel(item).then((res) => {
                vipsearch().then((res) => {
                    setData(res.data)
                })
            })
        })
    }

return (
    <div className='vipsearch'>
        <div className='searchbox'>
            <div className='searchboxheader'>
                <span>会员管理 / 会员查询</span>
                <h2>会员查询</h2>
            </div>
            <div className='searchboxoption'>
                <Form
                    layout="inline"
                    name="basic"
                    onFinish={onFinish}
                >
                    <div>
                        <Form.Item label="会员姓名" name="vipname" rules={[]} className="item i1">
                            <Input style={{ width: 250 }} />
                        </Form.Item>

                        <Form.Item label="会员等级" name="grade" rules={[]} className="item i2">
                            <Input style={{ width: 250 }} />
                        </Form.Item>
                    </div>
                    <div>
                        <Form.Item className="item">
                            <Button type="primary" htmlType="submit">查询</Button>
                        </Form.Item>
                    </div>
                </Form>
            </div>
        </div>

        <div className='searchlist'>
            <div className='action'>
                <span className='atitle'>会员列表</span>
                <div>
                    <Button onClick={showModal} type="primary">+新建</Button>
                    <Modal title="编辑基础资料" open={isModalOpen} footer={null}>
                        <Form
                            name="basic"
                            onFinish={onFinish1}
                        >
                            <Form.Item
                                label="会员姓名"
                                name="vipname"
                                rules={[{ required: true, message: '请输入会员姓名!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="联系方式"
                                name="phone"
                                rules={[{ required: true, message: '请输入手机号!' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item name="sex" label="会员性别" rules={[{ required: true, message: '请选择性别!' }]}>
                                <Radio.Group>
                                    <Radio value="女">女</Radio>
                                    <Radio value="男">男</Radio>
                                </Radio.Group>
                            </Form.Item>
                            <Form.Item name="pay" label="是否付费用户" rules={[{ required: true, message: '请选择性别!' }]}>
                                <Radio.Group>
                                    <Radio value="否">否</Radio>
                                    <Radio value="是">是</Radio>
                                </Radio.Group>
                            </Form.Item>
                            <Form.Item
                                label="会员年龄"
                                name="age"
                                rules={[{ required: true, message: '请输入年龄!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="常用收货人"
                                name="consignee"
                                rules={[{ required: true, message: '请输入收货人!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="详细地址"
                                name="address"
                                rules={[{ required: true, message: '请输入地址!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="会员等级"
                                name="grade"
                                rules={[{ required: true, message: '请输入等级!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="微信昵称"
                                name="wechat"
                                rules={[{ required: true, message: '请输入微信昵称!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="会员备注"
                                name="remarks"
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item className="item">
                                <Button type="primary" htmlType="submit">保存</Button>
                                <Button onClick={() => {setIsModalOpen(false)}} style={{marginLeft:340}}>取消</Button>
                            </Form.Item>
                        </Form>
                    </Modal>
                    <Button onClick={() => { manyDell(keys)}}>批量删除</Button>
                </div>
            </div>
            <Tables manyDel={manyDel} status={1} columns={columns} data={data}></Tables>
        </div>

    </div>
);
}

export default Vipsearch;